<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" id="permission">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content list-table">
      <div class="modal-header">
        
        <h4 class="modal-title">权限列表</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body" >
        <div class="row" style="margin-bottom: 10px;">
          <input style="margin: 5px 3px 0px 0px;" type="checkbox" (click)="selectAll()" [checked]="selected?.length == tabVal?.length" />
          <label style="color: #fff;margin-bottom: 0px;">全部权限( 共 {{tabVal?.length}} 个)</label>
        </div>  
        <div class="row chk">
            <div class="col-sm-3" *ngFor="let val of tabVal; let  i = index;">
                <input type="checkbox" 
                #need
                [checked] = "isSelected(val.operationId,val.operationName)"
                value="val.operationId"
                (click)="getSysVal(val.operationId,val.operationName);" />
                <label>{{ val.operationName }}</label>
            </div>
        </div>
        
        <!-- <div class="table-header"> 
          <table class="table table-bordered table-header">
            <thead>
              <tr>
                <td class="w10 text-center">
                  <input type="checkbox" (click)="selectAll()" [checked]="selected?.length == tabVal?.length">
                </td>
                <td class="w10 text-center">序号</td>
                <td class="w90 text-left">权限名称</td>
              </tr>
            </thead>
          </table>
        </div>  
        <div class="table-body">
          <table class="table table-bordered table-header"> 
            <tbody id="personal-user-tbody">
              <tr  *ngFor="let val of tabVal; let  i = index;" [ngClass]="{'active':i%2!=0}">
                <td class="w10 text-center">
                  <input type="checkbox" 
                    #need
                    [checked]="isSelected(val.operationId,val.operationName)"
                    [value]="val.operationId"
                    (click)="getSysVal(val.operationId,val.operationName)">
                </td>
                <td class="w10 text-center">{{i+1}}</td>
                <td class="w90 text-left myCheckbox">{{ val.operationName }} </td>
              </tr>
              <tr>
                <td class="text-center hidden" id="personal-user-tbody-no-data" colspan="12">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div> -->
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" mat-raised-button data-dismiss="modal">取消
        </button>
        <button type="button" class="btn btn-primary" mat-button [disabled]="tabValed?.length == 0" (click)="submitAssociated()">
            <span class="glyphicon glyphicon-ok"></span> 保存
        </button>
      </div>
    </div>
  </div>
</div>